/* eslint-disable no-undef */
import { useState} from "react";
import "../../../src/index.scss"

import { Input, Button } from "antd-mobile";

import useWebsocket from "../../hooks/useWebsocket";

export default function Message() {
  const [value, setValue] = useState("");

  const [messagelist, setMessagelist] = useState([
    {
      from: "you",
      content:
        " 同志，下拉可查看历史聊天消息的~若您需要咨询问题，建议您点击【订单】，选择需要咨询的订单点击【发送订单】",
    },
    {
      from: "me",
      content: " 同志，这里禁止大小便谢谢您的配合",
    },
  ]);

  let socket = new WebSocket("ws://localhost:8888");
  socket.onopen = () => {
    console.log("连接成功");
  };
  socket.onmessage = (e) => {
    console.log(e.data);
    messagelist.push({
      from: "you",
      content: e.data,
    });
    // 更新数据
    setMessagelist([...messagelist]);
    // 清空输入框
    setValue("");
  };
  // 点击发送按钮，发送消息
  const sendMsg = () => {
    // 传递发送内容
    socket.send(value);
    // 将消息放到列表中渲染页面
    messagelist.push({
      from: "me",
      content: value,
    });
    // 更新数据
    setMessagelist([...messagelist]);
    // 清空输入框
    setValue("");
  };

  // 监听websocket关闭连接的事件
  socket.onclose = () => {
    socket = new WebSocket("ws://localhost:8888");
  };
  return (
    <div className={["message-box"]}>
      {/* 头部引入的标签栏 */}
      <div style={{width:"100%",background:"blue",height:"50px",fontSize:"30px",backgroundColor:"whith"}}>
      在线客服
    </div>
      {/* 头部标签可以传递颜色，然后使用三元判断符，bgColor='#fff' textColor='#000' */}

      <div className={["messagelist-box"]}>
        {/* 消息盒子*/}
        <div className={["messagelist"]}>
          {messagelist.map((item, index) => {
            return (
              <div
                key={index}
                className={
                  [
                    item.from === "you" ? "you-messageitem" : "me-messageitem"
                  ]
                }
              >
                <img
                  className={
                    [item.from === "you" ? "customer-avatar" : "me-avatar"]
                  }
                  src={
                    item.from === "you"
                      ? "https://img2.baidu.com/it/u=140788575,4191915434&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735146000&t=2c438a7e24c320d4ef4d987241c85ee0"
                      : "https://img1.baidu.com/it/u=781435481,24052815&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735146000&t=c9d83cb5fb55e7c586635d8f492a9a23"
                  }
                  alt=""
                />
                <span
                  className={
                    [
                      item.from === "you" ? "customer-message" : "me-message"
                    ]
                  }
                >
                  {item.content}
                </span>
              </div>
            );
          })}
          
        </div>
      </div>
      {/* 底部操作栏 */}
      <div className={["send-box"]}>
        <Input
          className={["send-input"]}
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
          onKeyUp={(e) => {
            if (e.keyCode === 13) {
              sendMsg();
            }
          }}
        />
        <span className={["img"]}>图片</span>
        <img
          className={["face"]}
          src="https://img1.baidu.com/it/u=3221503701,2378234179&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1735146000&t=17095f54d93ba87b1dd6f0d6a09606bd"
          alt=""
        />
        <Button
          color="primary"
          fill="solid"
          className={["send-btn"]}
          onClick={sendMsg}
        >
          发送
        </Button>
      </div>
      {/* <HomeTabbar /> */}
    </div>
  );
}
